<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Trainer Battle</title>
  <link rel="stylesheet" href="<%=cdnPath%>/css/style.css">
</head>

<body id="body">
  <div class="wrap">
    <div class="content">
      <div class="center">
        <div class="header">
          <div class="logo"></div>
          <div class="interactive">
            <a class="btn ios" href="<%=links.ios%>" target="_blank">
              <i class="icon"></i>
              <span class="os-txt">
                <%=phrase.ios%>
              </span>
            </a>
            <a class="btn android" href="<%=links.android%>" target="_blank">
              <i class="icon"></i>
              <span class="os-txt">
                <%=phrase.android%>
              </span>
            </a>
            <div class="btn gold hide">
              <%=phrase.connect%>
            </div>
            <%=logged%>
          </div>
        </div>
        <div class="aside-left loading"></div>
        <div class="aside-right loading"></div>
        <div class="aside-bottom loading"></div>
        <div class="widget1 loading"></div>
        <div class="widget2 loading"></div>
        <div class="widget3 loading"></div>
        <div class="widget4 loading"></div>

        <div class="event1">
          <div class="title">
            <%=event1.title%>
          </div>
          <div class="desc">
            <%=event1.desc%>
          </div>

          <div class="list">
            <%=event1.list%>
          </div>
          <div class="btn ed">
            <%=translation.notAchieve%>
          </div>
          <div class="sub-title">
            <%=event1.subTitle%>
          </div>
          <div class="sub-content">
            <%=event1.subDesc%>
          </div>
        </div>
        <div class="event2">
          <div class="title">
            <%=event2.title%>
          </div>
          <div class="desc">
            <%=event2.desc%>
          </div>
          <div class="line">
            <div class="item overview">
              <%=phrase.overview%>
            </div>
            <div class="item gap"></div>
            <div class="item record">
              <%=phrase.record%>
            </div>
          </div>

          <div class="timebar">
            <%=event2.timebar%>
          </div>

          <div class="pokemons">
            <div class="list">
              <%=event2.pokemonList%>
            </div>
            <div class="btn ed">
              <%=translation.join%>
            </div>
          </div>
        </div>

        <div class="event3">
          <div class="title">
            <%=event3.title%>
          </div>
          <div class="desc">
            <%=event3.desc%>
          </div>
          <div class="list">
            <%=event3.list%>
          </div>

        </div>

      </div>
    </div>

    <div class="nav-index">
      <%=navIndex%>
    </div>
    <div class="mask hide"></div>
    <div class="pop login hide">
      <div class="jlq"></div>
      <div class="close"></div>
      <div class="dashed"></div>
      <div class="dashed2"></div>
      <div class="x"></div>
      <div class="login">
        <div class="inputs">
          <div class="item">
            <div class="txt">
              <%=phrase.account%>
            </div>
            <input id="username" type="text" class="input" placeholder="Entrer le compte">
          </div>
          <div class="item">
            <div class="txt">
              <%=phrase.password%>
            </div>
            <input id="password" type="password" class="input" placeholder="Entrer le mot de passe
            ">
          </div>
        </div>
        <div class="btns">
          <div class="btn gold">
            <%=phrase.connect%>
          </div>
          <div class="btn fb"></div>
        </div>
      </div>
    </div>

    <div class="pop ctn hide">
      <div class="jlq"></div>
      <div class="close"></div>
      <div class="dashed"></div>
      <div class="dashed2"></div>
      <div class="x"></div>
      <div class="ctn"></div>
    </div>

    <div class="pop server hide">
      <div class="jlq"></div>
      <div class="close"></div>
      <div class="dashed"></div>
      <div class="dashed2"></div>
      <div class="x"></div>
      <div class="server">
        <div class="txt">
          <%=phrase.serverSelect%>
        </div>
        <div class="box">
          <div class="item server">
            <select id="server"></select>
          </div>
          <div class="item role">
            <div id="role"></div>
            <div class="btn gold">
              <%=phrase.confirm%>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="pop overview hide">
      <div class="jlq"></div>
      <div class="close"></div>
      <div class="dashed"></div>
      <div class="dashed2"></div>
      <div class="x"></div>
      <div class="overview">
        <%=overview%>
      </div>
    </div>
    <!-- https://www.facebook.com/TrainerBattle/ -->
    <script src="<%=cdnPath%>/js/index.js"></script>
    <script>
      var dom = {
        navIndexItem: $('.nav-index .item .hover'),
        window: $(window)
      }
      var functions = {
        navIndexItemHoverIn: function (e) {
          var target = $(e.target)
          var item = target.parent()
          item.addClass('hover')
          item.find('.cell').removeClass('hide')
        },
        navIndexItemHoverOut: function (e) {
          var target = $(e.target)
          var item = target.parent()
          item.removeClass('hover')
          item.find('.cell').addClass('hide')
        },
      }
      dom.navIndexItem.hover(functions.navIndexItemHoverIn, functions.navIndexItemHoverOut)

      var heights = [document.querySelector('.event1 .title'), document.querySelector('.event2 .title'), document.querySelector(
        '.event3 .title')].map(
        item => {
          return window.modules.utils.getElementTop(item)
        })
      dom.navIndexItem.click((e) => {
        var index = e.target.dataset.index * 1
        if (index === 3) {
          window.open('https://www.facebook.com/TrainerBattle/')
        } else {
          var height = heights[index]
          dom.window.scrollTop(height)
        }

      })
    </script>
</body>

</html>